<template>
	<view style="padding-top: 30rpx">
		<uni-row>
			<uni-col :span="20" :push="2">
				<uni-forms :modelValue="formData">
					<uni-forms-item label="书名" name="bookName">
						<uni-easyinput type="text" v-model="formData.bookName" placeholder="请输入书籍名" />
					</uni-forms-item>
					<uni-forms-item label="作者名" name="authorName">
						<uni-easyinput type="text" v-model="formData.authorName" placeholder="请输入作者名" />
					</uni-forms-item>

					<uni-forms-item label="类型" name="type">
						<uni-data-select v-model="formData.type" :localdata="bookType"></uni-data-select>
					</uni-forms-item>
					<!-- 图片 -->
					<uni-forms-item label="图片" name="image">
						<uni-file-picker
							ref="files"
							limit="1"
							v-model="fileArr"
							file-extname="png,jpg"
							@select="select"
							title="最多选择3张图片"
							@delete="deleteImg"
							name="upload"
						></uni-file-picker>
					</uni-forms-item>
					<uni-forms-item label="简介" name="introduction">
						<uni-easyinput type="text" v-model="formData.introduction" placeholder="请输入大致简介" />
					</uni-forms-item>
					<uni-forms-item label="书籍状态" name="bookStatus">
						<uni-easyinput type="textarea" autoHeight v-model="formData.bookStatus" placeholder="请输入书籍受损情况,例如:1.封面涂鸦;2.尾页缺失" />
					</uni-forms-item>
					<uni-forms-item label="上传人" name="UploaderName">
						<uni-easyinput type="text" v-model="formData.UploaderName" placeholder="请输入上传人名字" />
					</uni-forms-item>
					<uni-forms-item label="上传人班级" name="UploaderClass">
						<uni-easyinput type="text" v-model="formData.UploaderClass" placeholder="请输入上传人班级" />
					</uni-forms-item>
					<uni-forms-item label="上传时间" name="UploaderTime">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.UploaderTime" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="upload()">上传</button>
			</uni-col>
		</uni-row>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { setBook } from '@/utils/book.js';
import BASE_URL from '@/utils/env.js'
export default {
	data() {
		return {
			//查询表单
			formData: {
				bookName: '',
				authorName: '',
				type: '',
				introduction: '',
				bookStatus: '',
				bookImage: [],
				UploaderName: '',
				UploaderClass: '',
				UploaderTime: '',
				//isLend表示书籍借用状态
				isLend: 0
			},
			//书籍类型
			bookType: [
				{ value: 0, text: '科学' },
				{ value: 1, text: '文学' },
				{ value: 2, text: '神秘' }
			],
			//图片存储地址
			action: '@/static',
			//显示的图片数据
			fileArr: [],
			//用于上传的图片列表
			imgList: [],
			zzz: '',
			//消息提示
			messageText: '',
			//消息类型
			msgType: ''
		};
	},
	methods: {
		reset() {
			this.formData = {
				bookName: '',
				authorName: '',
				type: '',
				introduction: '',
				bookImage: [],
				bookStatus: '',
				UploaderName: '',
				UploaderClass: '',
				UploaderTime: '',
				isLend: 0
			},
			this.fileArr = [];
			this.imgList = [];
			//清除选中提交后的图片
			this.$refs.files.clearFiles()
		},
		//图片上传
		imgUpload() {
			return new Promise((resolve,reject) => {
				uni.uploadFile({
					url: BASE_URL+'/api/uploadImg',
					filePath: this.imgList[0],
					header: {
						'Content-Type': 'multipart/form-data'
					},
					name: 'upload',
					formData: {
						user: 'test'
					},
					success: (res) => {
						this.zzz = JSON.parse(res.data);
						if (this.zzz.code == 200) {
							console.log(this.zzz.url,'打印出来的url')
							resolve(this.zzz.url)
						}
					},
					fail: (error) => {
						this.msgType = 'error';
						this.messageText = `上传失败`;
						this.$refs.message.open();
						console.log('失败', JSON.stringify(error));
					}
				});
			})
		},
		//多个图片上传
		// imgUpload() {
		// 	this.imgList.forEach((item, index) => {
		// 		uni.uploadFile({
		// 			url: BASE_URL+'/api/uploadImg',
		// 			filePath: this.imgList[index],
		// 			header: {
		// 				'Content-Type': 'multipart/form-data'
		// 			},
		// 			name: 'upload',
		// 			formData: {
		// 				user: 'test'
		// 			},
		// 			success: (res) => {
		// 				this.zzz = JSON.parse(res.data);
		// 				if (this.zzz.code == 200) {
		// 					console.log(this.zzz.url,'打印出来的url')
		// 					this.formData.bookImage.push(this.zzz.url);
		// 				}
		// 			},
		// 			fail: (error) => {
		// 				this.msgType = 'error';
		// 				this.messageText = `上传失败`;
		// 				this.$refs.message.open();
		// 				console.log('失败', JSON.stringify(error));
		// 			}
		// 		});
		// 	});
		// },
		async upload() {
			this.formData.bookImage = await this.imgUpload();
			console.log(this.imgList,'遍历传递前的图片数组')
			console.log(this.formData.bookImage,'即将传递的书籍信息')
			this.tosetBook()
		},
		tosetBook(){
			console.log(this.formData,'1111111')
			setBook(this.formData).then((res) => {
				if (res.code == 200) {
					console.log('上传成功');
					this.msgType = 'success';
					this.messageText = `上传成功`;
					this.$refs.message.open();
					this.reset();
				}
			});
		},
		//获取被删除图片的网址
		deleteImg(e) {
			console.log(e.tempFilePath,'被删除图片的网址')
			this.imgList.forEach((item, index) => {
				if (item == e.tempFilePath) {
					this.imgList.splice(index, 1);
					console.log('删除成功')
					return;
				}
			});
			console.log(this.imgList,'现在存在的图片')
		},
		//获取上传的图片名字
		select(e) {
			console.log('往里面添加一张图片',e.tempFilePaths[0])
			this.imgList.push(e.tempFilePaths[0]);
			console.log('现在数组里面的图片有',this.imgList)
		}
	}
};
</script>

<style></style>
